import './style.css'
import { useSelector, useDispatch } from 'react-redux'
import useGetComponent from '../../../../hooks/useGetComponent'
import { updateCurrentIndex } from '../../../../store/modules/schemaSlice'
import { useEffect } from 'react'

export default function () {
    const schema = useSelector(state => (state as any).schema).data
    const dispatch = useDispatch()
    const { getComponent } = useGetComponent();

    const handleClick = (index: number) => {
        console.log(index)
        dispatch(updateCurrentIndex(index))
    }

    useEffect(() => {
    }, [schema])


    return (
        <>
            <p>canvas</p>
            {
                schema.map((c: any, index: number) => {
                    return (
                        <div key={c.id} className="wrapper" onClick={() => handleClick(index)}>
                            {getComponent(c)}
                        </div>
                    )
                })
            }
        </>
    )
}